const APP = {
    data() {
        return {
            list: [],
            // loading -> 获取数据 ->没有数据 ->NO DATA
            //                     ->有数据 ->赋值list
            listStatus: 'loading'
        }
    },
    template: `
        <table border="1" width="300" align="center">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>username</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr v-if="listStatus === 'loading' "> 
                    <th colspan="2">Loading</th>
                </tr>
                <tr v-else-if="listStatus === 'noData'">
                    <th colspan="2">- NO DATA -</th>
                </tr>
                <tr v-else
                    v-for="item in list"
                    :key="item">
                    <th >{{ item.id }}</th>
                    <th>{{ item.username }}</th>
                </tr>
            </tbody>
        </table>
    `,
    mounted() {
        this.changeListStatus();
    },
    methods: {
        changeListStatus() {
            const num = Math.random();
            console.log(num > 0.5);
            setTimeout(() => {

                if (num > 0.5) {
                    console.log(1);
                    this.listStatus = 'noData';
                } else {
                    console.log(2);
                    this.list = [
                        {
                            id: 1,
                            username: "张三"
                        },
                        {
                            id: 2,
                            username: "李四"
                        }
                    ];
                    this.listStatus = 'data';
                }
            }, 2000);
        }
    }

}

Vue.createApp(APP).mount('#app');